<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${seo.title}"></title>
    <meta name="keywords" th:content="${seo.keyword}"/>
    <meta name="description"
          th:content="${seo.intro}"/>
    <meta name="applicable-device" content="pc,mobile">
    <link rel="shortcut icon" th:href="${company.favicon}">


    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/qhdcontent.css}" />
    <link rel="stylesheet"  type="text/css" th:href="@{/template_2/static/css/content.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/menu.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/jquery.fancybox-1.3.4.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/pgwslideshow.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/dmaku.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/style.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/style-green.css}" />
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
</head>
<body class="font-zh-CN" style="background:url(static/images/bg-img-02.jpg) top center fixed;">

<script th:src="@{/template_2/static/js/a1portalcore.js}" type="text/javascript"></script>
<script th:src="@{/template_2/static/js/a1portal.js}"></script>
<script th:src="@{/template_2/static/js/jquery-1.7.2.min.js}"></script>
<script th:src="@{/template_2/static/js/superfish.js}"></script>
<script th:src="@{/template_2/static/js/jquery.caroufredsel.js}"></script>
<script th:src="@{/template_2/static/js/jquery.touchswipe.min.js}"></script>
<script th:src="@{/template_2/static/js/jquery.tools.min.js}"></script>
<script th:src="@{/template_2/static/js/jquery.fancybox-1.3.4.pack.js}"></script>
<script th:src="@{/template_2/static/js/pgwslideshow.min.js}"></script>
<script th:src="@{/template_2/static/js/jquery.fixed.js}"></script>
<script th:src="@{/template_2/static/js/cloud-zoom.1.0.2.min.js}"></script>
<script th:src="@{/template_2/static/js/device.min.js}"></script>
<script th:src="@{/template_2/static/js/html5media-1.2.js}"></script>
<script th:src="@{/template_2/static/js/dmaku.min.js}"></script>
<script th:src="@{/template_2/static/js/isotope.pkgd.min.js}"></script>
<script th:src="@{/template_2/static/js/custom.js}"></script>

<div id="wrapper" class="home-page">
    <div th:replace="template_2/common/header :: header"></div>


    <div class="banner">
        <a th:href="${advertisingMap.link}">
            <img th:src="${advertisingMap.picture}" th:alt="${advertisingMap.title}" width="100%">
        </a>
    </div>
    <!-- ==================== S main ==================== -->
    <section class="main" id="app" style="min-height: 500px">
        <div id="a1portalSkin_mainArea" class="full-screen clearfix">
            <!-- Start_Module_228957 --><a name="26510" id="26510"></a><!-- S module-full-screen -->
            <div class="module-full-screen" style="">
                <div class="module-inner not-animated" data-animate="fadeInUp" data-delay="200">
                    <div class="page-width">
                        <div class="module-full-screen-title">
                            <h2>成功案例</h2>
                            <div class="module-title-content"><i class="mark-left"></i>
                                <h3>CASE</h3>
                                <i class="mark-right"></i>
                            </div>
                        </div>
                        <div id="a1portalSkin_ctr228957228957_mainArea" class="module-full-screen-content row">
                            <div class="product-item col-md-3 col-sm-4" v-for="item in page.content">
                                <div class="portfolio-img">
                                    <a :href="website+'/index/example?id='+item.id">
                                        <img :src="item.picture" alt="item.title" width="80%">
                                    </a>
                                </div>
                                <div class="portfolio-title">
                                    <h2><a :href="website+'/index/example?id='+item.id">{{item.title}}</a></h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- E module-full-screen -->

        </div>
        <h4 style="text-align: center">{{Loading}}{{noData}}</h4>

        <!-- end of page-width -->
    </section>
    <!-- ==================== E main ==================== -->
    <div th:replace="template_2/common/footer :: footer"></div>

</div>



<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script th:inline="javascript">
    var context = "http://" + window.location.host;

    var categoryId = [[${categoryId}]]
    var pageNum = 1;
    var pageSize = 16;
    console.log(categoryId);
    new Vue({
        el: '#app',
        data() {
            return {
                website: context,
                Loading: "努力加载中···",
                noData: "",
                page: {
                    pageNum: 1
                }
            }
        },
        created() {
            const thi = this

            //1.get通过直接发字符串拼接
            axios.get(`/api/example/findPage?c_id=` + categoryId + "&pageNum=" + pageNum + "&pageSize=" + pageSize)

                .then(response => {
                console.log(response.data.pageNum);

            if (response.data.pageNum > 0) {
                this.page = response.data;
                console.log(thi.page.content);

            } else {
                thi.Loading = "";
                thi.noData = "没有更多数据了···"
                console.log(thi.Loading + thi.noData);
            }

        })
        .
            catch(error => {
                console.log(error); //请求失败返回的数据
        })
            ;


            window.addEventListener("scroll", function (event) {
                //变量scrollTop是滚动条滚动时，距离顶部的距离
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                //变量windowHeight是可视区的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                //滚动条到底部的条件
                if (scrollTop + windowHeight + 20 > scrollHeight) {
                    console.log(scrollTop + windowHeight + "===============" + scrollHeight);

                    pageNum++
                    //1.get通过直接发字符串拼接
                    axios.get(`/api/example/findPage?c_id=` + categoryId + "&pageNum=" + pageNum + "&pageSize=" + pageSize)

                        .then(response => {
                        console.log(response.data.pageNum);
                    console.log(thi.page.pageNum);
                    if (thi.page.pageNum != response.data.pageNum) {
                        thi.page.pageNum = response.data.pageNum
                        thi.page.content = thi.page.content.concat(response.data.content)
                        console.log(thi.page.content);

                    } else {
                        thi.Loading = "";
                        thi.noData = "没有更多数据了···"
                    }

                }).
                    catch(error => {
                        console.log(error); //请求失败返回的数据
                })
                    ;
                }

            });

        }
    })
</script>

</body>

</html>